<template>
  <div>
    <el-dialog
      title="添加购物车"
      :visible.sync="dialogVisible"
      width="60%"
      @close="handleClose"
    >
      <div class="wrap wrap-sku">
        <div class="product-box">
          <div class="product-content">
            <div
              :key="n"
              class="product-delcom"
              v-for="(ProductItem, n) in simulatedDATA.specifications"
            >
              <div>{{ ProductItem.name }}</div>
              <ul class="product-footerlist clearfix">
                <li
                  :key="index"
                  v-for="(oItem, index) in ProductItem.item"
                  v-on:click="specificationBtn(oItem.name, n, $event, index)"
                  v-bind:class="[
                    oItem.isShow ? '' : 'noneActive',
                    subIndex[n] == index ? 'productActive' : '',
                  ]"
                >
                  {{ oItem.name }}
                </li>
              </ul>
            </div>
            <!-- <p v-if="price" class="price">¥{{ price }}</p> -->
          </div>
          <div class="product-content">
            <div class="product-delcom">
              <div class="product-delcom">
                <div>数量</div>
                <el-input-number
                  @change="change"
                  size="small"
                  :min="1"
                  :precision="0"
                  v-model="num"
                  :step="1"
                ></el-input-number>
              </div>
            </div>
          </div>
          <div v-if="price" class="product-content">
            <div class="product-delcom">
              <div class="product-delcom" style="align-items: center">
                <div style="margin-top: 0; padding-top: 0">价格</div>
                <div>¥{{ price * num }}</div>
              </div>
            </div>
          </div>
          <div class="product-content">
            <div class="product-delcom">
              <div
                class="product-delcom"
                style="display: flex; align-items: center"
              >
                <div
                  @click="jionCart"
                  class="product-footer"
                  style="margin-right: 30px"
                >
                  <a href="javascript:" rel="external nofollow">加入购物车</a>
                </div>

                <div @click="goCart" class="product-footer">
                  <a href="javascript:" rel="external nofollow">去购物车</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- <div @click="jionCart" class="product-footer">
        <a href="javascript:" rel="external nofollow">加入购物车</a>
      </div> -->

      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span> -->
    </el-dialog>

    <el-dialog title="用户您好:" :visible.sync="dialogFormVisible">
      <div class="notice">
        <!-- <div style="padding: 10px 0;">用户您好:</div> -->
        采购 HO 电机系列 <span class="span">10</span> 台以上享受折扣、S0 电机系列 
        <span class="span">100</span>
        台以上享折扣、中空编码器系列 <span class="span">100</span>
        件以上享折扣，网站目前暂无自动扣减功能，若您需要采购的数量超过了以上折扣数量，请联系我司销售专员为您单独制作合同。联系电话:13810424424(桑先生)
      </div>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addgwcart } from "../../apis/index";
export default {
  props: ["sendInfo", "curId"],
  data() {
    return {
      dialogFormVisible: false,
      productSpecsId: "",
      num: 1,
      dialogVisible: true,
      simulatedDATA: {
        //模拟后台返回的数据 多规格
        difference: [
          {
            //所有的规格可能情况都在这个数组里
            id: "19",
            price: "200.00",
            stock: "19",
            difference: "100,白色",
          },
          {
            id: "20",
            price: "100.00",
            stock: "29",
            difference: "200,白色",
          },
          {
            id: "21",
            price: "300.00",
            stock: "10",
            difference: "100,黑色",
          },
          {
            id: "22",
            price: "900.00",
            stock: "0",
            difference: "200,黑色",
          },
          {
            id: "23",
            price: "600.00",
            stock: "48",
            difference: "100,绿色",
          },
          {
            id: "24",
            price: "500.00",
            stock: "40",
            difference: "200,绿色",
          },
          {
            id: "25",
            price: "90.00",
            stock: "0",
            difference: "100,蓝色",
          },
          {
            id: "26",
            price: "40.00",
            stock: "20",
            difference: "200,蓝色",
          },
        ],
        data0: [
          {
            skuName1: "颜色",
            skuValue1: "白色",
            颜色: "白色",
            price: "4",
            stock: "true",
            sku: "白色20*28100g",
            skuName2: "大小",
            skuValue2: "20*28",
            大小: "20*28",
            isGwCart: "1",
            skuName3: "重量",
            skuValue3: "100g",
            重量: "100g",
            id: 119,
          },
          {
            skuName1: "颜色",
            skuValue1: "白色",
            颜色: "白色",
            price: "3",
            stock: "true",
            sku: "白色20*28100g200g",
            skuName2: "大小",
            skuValue2: "20*28",
            大小: "20*28",
            skuName3: "重量",
            skuValue3: "200g",
            重量: "200g",
            isGwCart: "1",
            id: 120,
          },
          {
            skuName1: "颜色",
            skuValue1: "白色",
            颜色: "白色",
            price: "72",
            stock: "true",
            sku: "白色20*2830*45100g",
            skuName2: "大小",
            skuValue2: "30*45",
            大小: "30*45",
            isGwCart: "1",
            skuName3: "重量",
            skuValue3: "100g",
            重量: "100g",
            id: 121,
          },
          {
            skuName1: "颜色",
            skuValue1: "白色",
            颜色: "白色",
            price: "62",
            stock: "true",
            sku: "白色20*2830*45100g200g",
            skuName2: "大小",
            skuValue2: "30*45",
            大小: "30*45",
            skuName3: "重量",
            skuValue3: "200g",
            重量: "200g",
            isGwCart: "1",
            id: 122,
          },
          {
            skuName1: "颜色",
            skuValue1: "黑色",
            颜色: "黑色",
            price: "52",
            stock: "true",
            sku: "黑色20*28100g",
            skuName2: "大小",
            skuValue2: "20*28",
            大小: "20*28",
            isGwCart: "1",
            skuName3: "重量",
            skuValue3: "100g",
            重量: "100g",
            id: 123,
          },
          {
            skuName1: "颜色",
            skuValue1: "黑色",
            颜色: "黑色",
            price: "42",
            stock: "true",
            sku: "黑色20*28100g200g",
            skuName2: "大小",
            skuValue2: "20*28",
            大小: "20*28",
            skuName3: "重量",
            skuValue3: "200g",
            重量: "200g",
            isGwCart: "1",
            id: 124,
          },
          {
            skuName1: "颜色",
            skuValue1: "黑色",
            颜色: "黑色",
            price: "32",
            stock: "false",
            sku: "黑色20*2830*45100g",
            skuName2: "大小",
            skuValue2: "30*45",
            大小: "30*45",
            isGwCart: "0",
            skuName3: "重量",
            skuValue3: "100g",
            重量: "100g",
            id: 125,
          },
          {
            skuName1: "颜色",
            skuValue1: "黑色",
            颜色: "黑色",
            price: "22",
            stock: "false",
            sku: "黑色20*2830*45100g200g",
            skuName2: "大小",
            skuValue2: "30*45",
            大小: "30*45",
            skuName3: "重量",
            skuValue3: "200g",
            重量: "200g",
            isGwCart: "0",
            id: 126,
          },
          {
            skuName1: "颜色",
            skuValue1: "橘色",
            颜色: "橘色",
            price: "12",
            stock: "false",
            sku: "橘色20*28100g",
            skuName2: "大小",
            skuValue2: "20*28",
            大小: "20*28",
            isGwCart: "0",
            skuName3: "重量",
            skuValue3: "100g",
            重量: "100g",
            id: 127,
          },
          {
            skuName1: "颜色",
            skuValue1: "橘色",
            颜色: "橘色",
            price: "82",
            stock: "false",
            sku: "橘色20*28100g200g",
            skuName2: "大小",
            skuValue2: "20*28",
            大小: "20*28",
            skuName3: "重量",
            skuValue3: "200g",
            重量: "200g",
            isGwCart: "0",
            id: 128,
          },
          {
            skuName1: "颜色",
            skuValue1: "橘色",
            颜色: "橘色",
            price: "5",
            stock: "false",
            sku: "橘色20*2830*45100g",
            skuName2: "大小",
            skuValue2: "30*45",
            大小: "30*45",
            isGwCart: "0",
            skuName3: "重量",
            skuValue3: "100g",
            重量: "100g",
            id: 129,
          },
          {
            skuName1: "颜色",
            skuValue1: "橘色",
            颜色: "橘色",
            price: "12",
            stock: "false",
            sku: "橘色20*2830*45100g200g",
            skuName2: "大小",
            skuValue2: "30*45",
            大小: "30*45",
            skuName3: "重量",
            skuValue3: "200g",
            重量: "200g",
            isGwCart: "0",
            id: 130,
          },
          {
            skuName1: "颜色",
            skuValue1: "粉色",
            颜色: "粉色",
            price: "0",
            stock: "true",
            sku: "粉色20*28100g",
            skuName2: "大小",
            skuValue2: "20*28",
            大小: "20*28",
            skuName3: "重量",
            skuValue3: "100g",
            重量: "100g",
            isGwCart: "1",
            id: 131,
          },
          {
            skuName1: "颜色",
            skuValue1: "粉色",
            颜色: "粉色",
            price: "0",
            stock: "true",
            sku: "粉色20*28100g200g",
            skuName2: "大小",
            skuValue2: "20*28",
            大小: "20*28",
            skuName3: "重量",
            skuValue3: "200g",
            重量: "200g",
            isGwCart: "1",
            id: 132,
          },
          {
            skuName1: "颜色",
            skuValue1: "粉色",
            颜色: "粉色",
            price: "0",
            stock: "true",
            sku: "粉色20*2830*45100g",
            skuName2: "大小",
            skuValue2: "30*45",
            大小: "30*45",
            skuName3: "重量",
            skuValue3: "100g",
            重量: "100g",
            isGwCart: "1",
            id: 133,
          },
          {
            skuName1: "颜色",
            skuValue1: "粉色",
            颜色: "粉色",
            price: "0",
            stock: "true",
            sku: "粉色20*2830*45100g200g",
            skuName2: "大小",
            skuValue2: "30*45",
            大小: "30*45",
            skuName3: "重量",
            skuValue3: "200g",
            重量: "200g",
            isGwCart: "1",
            id: 134,
          },
        ],

        data1: [
          {
            typeName: "颜色",
            tags: ["白色", "黑色", "橘色", "粉色"],
          },
          {
            typeName: "大小",
            tags: ["20*28", "30*45"],
          },
          {
            typeName: "重量",
            tags: ["100g", "200g"],
          },
        ],
        specifications: [
          {
            //这里是要被渲染字段
            name: "尺寸",
            item: [
              {
                name: "100",
              },
              {
                name: "200",
              },
            ],
          },
          {
            name: "颜色",
            item: [
              {
                name: "白色",
              },
              {
                name: "蓝色",
              },
              {
                name: "黑色",
              },
              {
                name: "绿色",
              },
            ],
          },
        ],
      },
      selectArr: [], //存放被选中的值
      shopItemInfo: {}, //存放要和选中的值进行匹配的数据
      subIndex: [], //是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
      price: "", //选中规格的价钱
    };
  },
  methods: {
    change(e) {
      if (e > 9) {
        console.log(e, 6666);
        this.dialogFormVisible = true;
      }
    },
    // 去购物车
    goCart() {
      this.$emit("showCartFn");
      this.$store.commit("changeactiveIndex", "10");
      this.$router.push("/cart");
    },
    // 加入购物车
    jionCart() {
      if (!localStorage.getItem("jztoken")) {
        this.$message({
          message: "请先登录！",
          type: "warning",
        });
        return;
      }
      if (!this.productSpecsId) {
        this.$message({
          message: "请先选择产品",
          type: "warning",
        });
        return;
      }
      addgwcart({
        productSpecsId: this.productSpecsId,
        productId: this.curId + "",
        number: this.num,
        remark: "无特殊需求",
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            // this.$message({
            //     message: '添加成功！',
            //     type: 'success'
            //   });
          }
          console.log(res.data.code, 88888888888);
        })
        .catch(() => {});
    },
    specificationBtn(item, n, event, index) {
      var self = this;
      if (self.selectArr[n] != item) {
        self.selectArr[n] = item;
        self.subIndex[n] = index;
      } else {
        self.selectArr[n] = "";
        self.subIndex[n] = -1; //去掉选中的颜色
      }
      self.checkItem();
    },
    checkItem() {
      var self = this;
      var option = self.simulatedDATA.specifications;
      var result = []; //定义数组储存被选中的值
      for (var i in option) {
        result[i] = self.selectArr[i] ? self.selectArr[i] : "";
      }
      for (var i in option) {
        var last = result[i]; //把选中的值存放到字符串last去
        for (var k in option[i].item) {
          result[i] = option[i].item[k].name; //赋值，存在直接覆盖，不存在往里面添加name值

          // debugger
          option[i].item[k].isShow = self.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
        }
        result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时被覆盖
      }
      if (this.shopItemInfo[result]) {
        console.log(this.shopItemInfo[result], 4444444);
        this.productSpecsId = this.shopItemInfo[result].id || "";
        this.price = this.shopItemInfo[result].price || "";
      }
      self.$forceUpdate(); //重绘
    },
    isMay(result) {
      for (var i in result) {
        if (result[i] == "") {
          return true; //如果数组里有为空的值，那直接返回true
        }
      }
      return this.shopItemInfo[result]?.stock == 0 ? false : true; //匹配选中的数据的库存，若不为空返回true反之返回false
    },

    handleClose() {
      this.$emit("showCartFn");
    },
  },
  created() {
    var self = this;

    console.log(self.sendInfo, "我是详情页面传递过来的数据222222222222222");

    self.simulatedDATA.difference = self.sendInfo.data0?.map((r) => {
      let difference = "";
      if (r.skuValue1) {
        difference = r.skuValue1;
      }

      if (r.skuValue1 && r.skuValue2) {
        difference = r.skuValue1 + "," + r.skuValue2;
      }
      if (r.skuValue1 && r.skuValue2 && r.skuValue3) {
        difference = r.skuValue1 + "," + r.skuValue2 + "," + r.skuValue3;
      }
      if (r.skuValue1 && r.skuValue2 && r.skuValue3 && r.skuValue4) {
        difference =
          r.skuValue1 +
          "," +
          r.skuValue2 +
          "," +
          r.skuValue3 +
          "," +
          r.skuValue4;
      }

      return {
        ...r,
        stock: r?.stock == "true" ? 1 : 0,
        difference: difference,
        // difference: r.skuValue1 + "," + r.skuValue2 ,
        // difference: r.skuValue1 + "," + r.skuValue2 + "," + r.skuValue3,
      };
    });

    self.simulatedDATA.specifications = self.sendInfo.data1?.map((r) => {
      return {
        name: r.typeName,
        item: r.tags?.map((s) => {
          return {
            name: s,
          };
        }),
      };
    });

    for (var i in self.simulatedDATA.difference) {
      self.shopItemInfo[self.simulatedDATA.difference[i].difference] =
        self.simulatedDATA.difference[i]; //修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
    }
    self.checkItem();
  },
};
</script>

<style lang="scss" rel="stylesheet">
.el-dialog__title{
  font-size: 17px;
  line-height: 30px;
  font-weight: bold;
}
.notice{
  font-size: 17px;
  line-height: 30px;
  font-weight: bold;
  color: #333;
}
.span{
  color: red;
}
.product-footer {
  width: 150px;
  background-color: #1a1a29;
  text-align: center;
}
.product-footer a {
  color: #fff;
  text-decoration: none;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
}
.wrap-sku {
  .product-box {
    width: 80%;
    display: block;
    margin: 0 auto;
  }
  .product-content {
    margin-bottom: 10px;
  }
  .product-delcom {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    color: #323232;
    font-size: 14px;
    // border-bottom: 1px solid #eeeeee;
    > div:nth-child(1) {
      margin-right: 15px;
      padding-top: 5px;
    }
    > div:nth-child(2) {
      flex: 1;
    }
  }

  .product-footerlist li {
    list-style-type: none;
    border: 1px solid #606060;
    border-radius: 5px;
    color: #606060;
    text-align: center;
    padding: 5px 15px;
    float: left;
    margin-right: 20px;
    cursor: pointer;
  }
  .product-footerlist li.productActive {
    background-color: #1a1a29;
    color: #fff;
    border: 1px solid #1a1a29;
  }
  .product-footerlist li.noneActive {
    background-color: #ccc;
    opacity: 0.4;
    color: #000;
    pointer-events: none;
  }

  .price {
    font-size: 16px;
    height: 60px;
    line-height: 60px;
  }
}
</style>
